<template>
  <div>
    <div class="home">
      <van-row type="flex" justify="space-between">
        <van-col span="3" class="nav-size">
          <van-icon name="apps-o" size="0.533333rem" />
          <div>分类</div>
        </van-col>
        <van-col span="18">
          <div class="seachbox">
            <div class="seach">
              <van-icon name="search" size="0.533333rem" />
            </div>
          </div>
        </van-col>
        <van-col span="3" class="nav-size">
          <van-icon name="scan" size="0.533333rem" />
          <div>扫一扫</div>
        </van-col>
      </van-row>
      <div class="bannerbox">
        <div class="bannerA">
          <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item>
              <img src="../assets/img/home/bannerBg.jpg" alt />
            </van-swipe-item>
            <van-swipe-item>
              <img src="../assets/img/home/bannerBg.jpg" alt />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <div class="bannerIcon">
      <van-swipe indicator-color="white">
        <van-swipe-item>
          <van-grid
            square
            :center="false"
            :column-num="5"
            :border="false"
            :clickable="false"
            icon-size="0.866667rem"
          >
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon01.png" text="新品推荐" />
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon02.png" text="特卖专场" />
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon03.png" text="现时秒杀" />
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon04.png" text="优惠砍价" />
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon05.png" text="积分兑换" />
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon06.png" text="优惠拼团" />
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon07.png" text="9.9包邮" />
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon08.png" text="万商甄品" />
            <van-grid-item to="/Brands" icon="http://127.0.0.1/img/home/banner-icon09.png" text="品牌街" />
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon10.png" text="商品预售" />
          </van-grid>
        </van-swipe-item>
        <van-swipe-item>
          <van-grid
            square
            :center="false"
            :column-num="5"
            :border="false"
            :clickable="false"
            icon-size="0.866667rem"
          >
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon11.png" text="9.9包邮" />
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon12.png" text="万商甄品" />
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon13.png" text="品牌节" />
            <van-grid-item icon="http://127.0.0.1/img/home/banner-icon14.png" text="商品预售" />
          </van-grid>
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="reb">
      <ul class="guarantee">
        <li style="list-style: none">万商甄品</li>
        <li>假一赔十</li>
        <li>100%正品</li>
        <li>售后无忧</li>
      </ul>
      <div class="new-red">
        <div class="hongbao">
          <img src="../assets/img/home/hongbao.png" alt />
        </div>
        <div class="tuijain">
          <div>
            <img src="../assets/img/home/quality.png" alt />
          </div>
          <div>
            <img src="../assets/img/home/overflow.png" alt />
          </div>
        </div>
      </div>
    </div>
    <div class="headline">
      <div class="headline-box">
        <img src="../assets/img/home/headline.png" alt />
      </div>
      <van-notice-bar
        color="#000000"
        background="#ffffff"
      >通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容</van-notice-bar>
    </div>
    <div class="poster">
      <img src="../assets/img/home/poster.png" alt />
    </div>
    <van-swipe class="recommend" indicator-color="white">
      <van-swipe-item>
        <div class="overseas">
          <div class="overseasTop">
            <div class="top-img">
              <img src="../assets/img/home/overseasTopImg.png" alt />
            </div>
            <div class="top-title">
              <div>海外好货</div>
              <div>
                <span class="colorA">20</span>热卖推荐
              </div>
            </div>
          </div>
          <div class="overseasBottom">
            <div class="commodity">
              <div class="commodity-img">
                <img src="../assets/img/home/overseasBottomImg.png" alt />
              </div>
              <div class="commodity-title">LION/狮王日本进口美白 牙膏亮白牙齿LION/狮王日本进口美白 牙膏亮白牙齿</div>
              <div class="commodity-price">
                <div class="colorA">￥11.88</div>
                <div>18.00</div>
              </div>
              <div class="pinkageBox">
                <span>6.6折</span>
                <span>包邮</span>
              </div>
            </div>
            <div class="commodity">
              <div class="commodity-img">
                <img src="../assets/img/home/overseasBottomImg.png" alt />
              </div>
              <div class="commodity-title">LION/狮王日本进口美白 牙膏亮白牙齿LION/狮王日本进口美白 牙膏亮白牙齿</div>
              <div class="commodity-price">
                <div class="colorA">￥11.88</div>
                <div>18.00</div>
              </div>
              <div class="pinkageBox">
                <span>6.6折</span>
                <span>包邮</span>
              </div>
            </div>
            <div class="commodity">
              <div class="commodity-img">
                <img src="../assets/img/home/overseasBottomImg.png" alt />
              </div>
              <div class="commodity-title">LION/狮王日本进口美白 牙膏亮白牙齿LION/狮王日本进口美白 牙膏亮白牙齿</div>
              <div class="commodity-price">
                <div class="colorA">￥11.88</div>
                <div>18.00</div>
              </div>
              <div class="pinkageBox">
                <span>6.6折</span>
                <span>包邮</span>
              </div>
            </div>
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="overseas">
          <div class="overseasTop">
            <div class="top-img">
              <img src="../assets/img/home/overseasTopImg.png" alt />
            </div>
            <div class="top-title">
              <div>海外好货</div>
              <div>
                <span class="colorA">20</span>热卖推荐
              </div>
            </div>
          </div>
          <div class="overseasBottom">
            <div class="commodity">
              <div class="commodity-img">
                <img src="../assets/img/home/overseasBottomImg.png" alt />
              </div>
              <div class="commodity-title">LION/狮王日本进口美白 牙膏亮白牙齿LION/狮王日本进口美白 牙膏亮白牙齿</div>
              <div class="commodity-price">
                <div class="colorA">￥11.88</div>
                <div>18.00</div>
              </div>
              <div class="pinkageBox">
                <span>6.6折</span>
                <span>包邮</span>
              </div>
            </div>
            <div class="commodity">
              <div class="commodity-img">
                <img src="../assets/img/home/overseasBottomImg.png" alt />
              </div>
              <div class="commodity-title">LION/狮王日本进口美白 牙膏亮白牙齿LION/狮王日本进口美白 牙膏亮白牙齿</div>
              <div class="commodity-price">
                <div class="colorA">￥11.88</div>
                <div>18.00</div>
              </div>
              <div class="pinkageBox">
                <span>6.6折</span>
                <span>包邮</span>
              </div>
            </div>
            <div class="commodity">
              <div class="commodity-img">
                <img src="../assets/img/home/overseasBottomImg.png" alt />
              </div>
              <div class="commodity-title">LION/狮王日本进口美白 牙膏亮白牙齿LION/狮王日本进口美白 牙膏亮白牙齿</div>
              <div class="commodity-price">
                <div class="colorA">￥11.88</div>
                <div>18.00</div>
              </div>
              <div class="pinkageBox">
                <span>6.6折</span>
                <span>包邮</span>
              </div>
            </div>
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="overseas">
          <div class="overseasTop">
            <div class="top-img">
              <img src="../assets/img/home/overseasTopImg.png" alt />
            </div>
            <div class="top-title">
              <div>海外好货</div>
              <div>
                <span class="colorA">20</span>热卖推荐
              </div>
            </div>
          </div>
          <div class="overseasBottom">
            <div class="commodity">
              <div class="commodity-img">
                <img src="../assets/img/home/overseasBottomImg.png" alt />
              </div>
              <div class="commodity-title">LION/狮王日本进口美白 牙膏亮白牙齿LION/狮王日本进口美白 牙膏亮白牙齿</div>
              <div class="commodity-price">
                <div class="colorA">￥11.88</div>
                <div>18.00</div>
              </div>
              <div class="pinkageBox">
                <span>6.6折</span>
                <span>包邮</span>
              </div>
            </div>
            <div class="commodity">
              <div class="commodity-img">
                <img src="../assets/img/home/overseasBottomImg.png" alt />
              </div>
              <div class="commodity-title">LION/狮王日本进口美白 牙膏亮白牙齿LION/狮王日本进口美白 牙膏亮白牙齿</div>
              <div class="commodity-price">
                <div class="colorA">￥11.88</div>
                <div>18.00</div>
              </div>
              <div class="pinkageBox">
                <span>6.6折</span>
                <span>包邮</span>
              </div>
            </div>
            <div class="commodity">
              <div class="commodity-img">
                <img src="../assets/img/home/overseasBottomImg.png" alt />
              </div>
              <div class="commodity-title">LION/狮王日本进口美白 牙膏亮白牙齿LION/狮王日本进口美白 牙膏亮白牙齿</div>
              <div class="commodity-price">
                <div class="colorA">￥11.88</div>
                <div>18.00</div>
              </div>
              <div class="pinkageBox">
                <span>6.6折</span>
                <span>包邮</span>
              </div>
            </div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
    <div class="recommend2">
      <div class="recommend2-left">
        <div>
          <img src="../assets/img/home/recommend2-01.png" alt />
        </div>
        <div>
          <img src="../assets/img/home/recommend2-03.png" alt />
        </div>
        <div>
          <img src="../assets/img/home/recommend2-05.png" alt />
        </div>
      </div>
      <div class="recommend2-right">
        <div>
          <img src="../assets/img/home/recommend2-02.png" alt />
        </div>
        <div>
          <img src="../assets/img/home/recommend2-04.png" alt />
        </div>
        <div>
          <img src="../assets/img/home/recommend2-06.png" alt />
        </div>
      </div>
    </div>
    <div>
      <ul class="tab">
        <li
          v-for="(item, index) in tabTitle"
          :key="index"
          :class="{active:index == tabNum}"
          @click="tab(index)"
        >
          <div>{{item.title}}</div>
          <div>{{item.explain}}</div>
        </li>
      </ul>
      <ul class="center">
        <li v-for="(item, index) in tabCentets" :key="index" v-show="index == tabNum">
          <div class="commodity-2" v-for="(item, index) in tabCentets" :key="index">
            <div>
              <img :src="item.commodityImg" alt />
            </div>
            <div>{{item.commodityTitle}}</div>
            <div class="colorA">{{item.commodityPrice}}</div>
          </div>
        </li>
      </ul>
    </div>
    <TabBar ref="myActive"></TabBar>
  </div>
</template>

<script>
import TabBar from '../components/TabBar'
export default {
  name: "Home",
  components: {
    TabBar
  },
  data() {
    return {
      active: 0,
      tabNum: 0,
      tabBar:0,
      tabTitle: [
        {
          title: "全部",
          explain: "为你推荐"
        },
        {
          title: "电器",
          explain: "3C家电"
        },
        {
          title: "全球",
          explain: "进口好货"
        },
        {
          title: "生活",
          explain: "享受生活"
        },
        {
          title: "母婴",
          explain: "母婴大赏"
        },
        {
          title: "时尚",
          explain: "时尚好货"
        },
        {
          title: "超市",
          explain: "酒水美食"
        }
      ],
      tabCentets: [
        {
          commodityImg: "http://127.0.0.1/img/home/commodityImg-01.png",
          commodityTitle:
            "美国Stojo新款便携旅行杯折叠 水杯压缩杯咖啡杯环保杯美国Stojo新款便携旅行杯折叠",
          commodityPrice: "￥118.00"
        },
        {
          commodityImg: "http://127.0.0.1/img/home/commodityImg-01.png",
          commodityTitle:
            "美国Stojo新款便携旅行杯折叠 水杯压缩杯咖啡杯环保杯美国Stojo新款便携旅行杯折叠",
          commodityPrice: "￥119.00"
        },
        {
          commodityImg: "http://127.0.0.1/img/home/commodityImg-01.png",
          commodityTitle:
            "美国Stojo新款便携旅行杯折叠 水杯压缩杯咖啡杯环保杯美国Stojo新款便携旅行杯折叠",
          commodityPrice: "￥119.00"
        },
        {
          commodityImg: "http://127.0.0.1/img/home/commodityImg-01.png",
          commodityTitle:
            "美国Stojo新款便携旅行杯折叠 水杯压缩杯咖啡杯环保杯美国Stojo新款便携旅行杯折叠",
          commodityPrice: "￥119.00"
        }
      ]
    };
  },
  methods: {
    tab(index) {
      this.tabNum = index;
      console.log(index);
    }
  }
};
</script>

<style lang="scss">
.tab {
  display: flex;
  justify-content: space-around;
  display: -webkit-box;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;

  li {
    width: 1.573333rem;
    border-left: 0.013333rem solid #cbcccb;
    border-right: 0.013333rem solid #cbcccb;

    div:nth-child(1) {
      font-size: 0.426667rem;
      font-weight: 650;
      color: #3d3d3d;
    }

    div:nth-child(2) {
      font-size: 0.293333rem;
      color: #8f8f8f;
    }
  }

  li:nth-child(1) {
    border-left: none;
  }

  li:last-child {
    border-right: none;
  }

  .active {
    div:nth-child(1) {
      color: #b30101;
    }

    div:nth-child(2) {
      color: #ffffff;
      background: #b30101;
      border-radius: 0.266667rem;
      margin: 0 0.066667rem;
    }
  }
}

.tab::-webkit-scrollbar {
  display: none;
}

.center {
  padding: 0.266667rem;

  li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.commodity-2 {
  width: 49%;
  background: #ffffff;
  box-sizing: border-box;
  margin-top: 0.133333rem;
  border-radius: 0.266667rem;
  text-align: left;
  padding: 0.266667rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  div {
    width: 100%;
    font-size: .346667rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}

body {
  background: #f2f2f2;
}

.home {
  box-sizing: border-box;
  padding: 0.133333rem;
  background: url(../assets/img/home/homeBg.png) no-repeat;
  background-size: 100% 4.666667rem;
}

.seachbox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.seach {
  height: 0.666667rem;
  display: flex;
  justify-content: flex-start;
  padding: 0 0.266667rem;
  border-radius: 0.333333rem;
  background: #ffffff;
  color: #000000;

  i {
    display: block;
    line-height: 0.666667rem;
  }
}

.bannerbox {
  box-sizing: border-box;
  margin: 0.2rem 0.2rem 0 0.2rem;
  .bannerA {
    width: 100%;
    .van-swipe-item {
      border-radius: 0.333333rem !important;
    }

    img {
      width: 100%;
      height: 100%;
      align-items: center;
      border-radius: 0.333333rem;
    }
  }
}



.bannerIcon {
  height: 4.266667rem;

  .van-swipe-item {
    height: 4.4rem !important;
  }

  .van-grid-item__content {
    background-color: #f2f2f2 !important;
  }

  .van-swipe__indicators {
    bottom: 0.066667rem;

    .van-swipe__indicator--active {
      background: #6b6b6b !important;
    }

    .van-swipe__indicator {
      background: #bdbdbd !important;
    }
  }
}

.nav-size {
  font-size: 0.32rem;
  color: #ffffff;
}

.meun {
  width: 100%;
  height: 100%;
  background: #000000;
}

.guarantee {
  height: 1.133333rem;
  line-height: 1.133333rem;
  display: flex;
  justify-content: space-around;
  margin: 0.266667rem 0.266667rem 0 0.266667rem;
  background: #f3a4a4;
  border-top-right-radius: 0.333333rem;
  border-top-left-radius: 0.333333rem;
}

.guarantee li {
  list-style: disc;
  font-size: 0.4rem;
  color: #ffffff;
}

.reb {
  padding: 0.266667rem 0;
  background: #ffffff;
  margin-top: 0.133333rem;

  .new-red {
    display: flex;
    justify-content: space-around;
    background: #f5c4c4;
    padding-bottom: 0.266667rem;
    margin: 0 0.266667rem 0.266667rem 0.266667rem;
    border-bottom-right-radius: 0.333333rem;
    border-bottom-left-radius: 0.333333rem;

    .hongbao {
      width: 50%;
      padding: 0.133333rem 0.266667rem;
      img {
        width: 100%;
        height: 100%;
        align-items: center;
      }
    }

    .tuijain {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      div {
        height: 50%;
        padding: 0.133333rem;

        img {
          width: 100%;
          height: 100%;
          align-items: center;
        }
      }
    }
  }
}

.headline {
  height: 0.666667rem;
  display: flex;
  justify-content: flex-start;
  border-top: 0.026667rem solid #e0e0e0;
  background: #ffffff;

  .van-notice-bar {
    width: 8.666667rem;
    height: 0.666667rem;
  }

  .headline-box {
    width: 1.333333rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-right: 0.026667rem solid #e0e0e0;

    img {
      width: 0.733333rem;
      height: 0.4rem;
    }
  }
}

.poster {
  padding: 0.266667rem;
  img {
    width: 100%;
    height: 100%;
    align-items: center;
  }
}

.recommend {
  padding-top: 0.533333rem;
  .van-swipe__indicators {
    display: none !important;
  }
}

.overseas {
  height: 100%;
  margin: 0 0.266667rem;
  background: #ffffff;
  border-radius: 0.333333rem;
}

.overseasTop {
  height: 4rem;
  position: relative;
  background: url(../assets/img/home/overseasTopBg.png) no-repeat;
  background-size: 100% 100%;
  border-top-left-radius: 0.333333rem;
  border-top-right-radius: 0.333333rem;
  display: flex;
  justify-content: flex-end;

  .top-img {
    width: 3.466667rem;
    height: 4.133333rem;
    position: absolute;
    top: -0.533333rem;
    left: 0.4rem;

    img {
      width: 100%;
      height: 100%;
      align-items: center;
      border-radius: 0.266667rem;
    }
  }

  .top-title {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    div:nth-child(1) {
      font-size: 0.533333rem;
      color: #3d3d3d;
      font-weight: 550;
    }

    div:nth-child(2) {
      font-size: 0.533333rem;
      color: #3d3d3d;
      border: 0.04rem solid #b30101;
      padding: 0.133333rem 0;
      border-radius: 0.533333rem;
      margin: 0 0.266667rem;
    }
  }
}

.colorA {
  color: #b30101;
}

.overseasBottom {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  padding: 0.373333rem 0 0.373333rem 0;
  .commodity {
    width: 31%;
    .commodity-img {
      img {
        width: 100%;
        height: 100%;
        align-items: center;
      }
    }
    .commodity-title {
      font-size: 0.32rem;
      color: #3d3d3d;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .commodity-price {
      text-align: left;

      div:nth-child(1) {
        font-size: 0.32rem;
      }

      div:nth-child(2) {
        font-size: 0.293333rem;
        text-decoration: line-through;
      }
    }

    .pinkageBox {
      display: flex;
      justify-content: flex-start;

      span:nth-child(1) {
        font-size: 0.266667rem;
        color: #ffffff;
        padding: 0.066667rem 0.2rem;
        background: #b30101;
      }

      span:nth-child(2) {
        font-size: 0.266667rem;
        padding: 0.066667rem 0.2rem;
        border: 0.026667rem solid #b30101;
        margin-left: 0.066667rem;
      }
    }
  }
}

.recommend2 {
  display: flex;
  justify-content: space-around;
  padding: 0.333333rem;
  margin: 0.266667rem;
  background: #ffffff;
  border-radius: 0.266667rem;

  .recommend2-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    div {
      margin-top: 0.266667rem;
      display: flex;
      justify-content: center;
      img {
        width: 100%;
        height: 100%;
        align-items: center;
      }
    }
  }

  .recommend2-right {
    width: 50%;
    border-left: 0.026667rem solid #efefef;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    div {
      margin-top: 0.266667rem;
      display: flex;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        align-items: center;
      }
    }
  }
}
</style>
